<template>
    <div class="page-content">

        <div class="page-left">
            <div class="left-top">
                <dv-border-box1 ref="borderRef">
                    <span class="chart-title">轮播表</span>
                    <div class="content">
                        <scroll-chart></scroll-chart>
                    </div>
                </dv-border-box1>
            </div>
            <div class="left-bottom">
                <dv-border-box10>
                    <span class="chart-title">柱状图</span>
                    <div class="content">
                        <bar-chart :option="option"></bar-chart>
                    </div>
                </dv-border-box10>
            </div>
        </div>
        <div class="page-center">
            <dv-border-box13>
                <div class="box13-content">
                    <div class="content">
                        <!-- <FlylineChart></FlylineChart> -->
                        <china-map></china-map>
                    </div>
                </div>
            </dv-border-box13>
        </div>
        <div class="page-right">
            <div class="top">
                <dv-border-box8 :dur="5">
                    <span class="chart-title">
                        <dv-decoration7>
                            胶囊柱状图
                        </dv-decoration7>
                    </span>
                    <div class="content">
                        <capsule-chart></capsule-chart>
                    </div>
                </dv-border-box8>
            </div>
            <div class="bottom">
                <dv-border-box4>
                    <div class="content">
                        <pie-chart></pie-chart>
                </div>
                </dv-border-box4>
              
            </div>
        </div>
    </div>
</template>

<script setup>
// import FlylineChart from './components/FlylineChart.vue'
import ChinaMap from './components/ChinaMap.vue'
import ScrollChart from './components/ScrollChart.vue'
import CapsuleChart from './components/CapsuleChart.vue'
import BarChart from './components/BarChart.vue'
import  PieChart from './components/PieChart.vue'
import { ref } from 'vue';

// 指定图表的配置项和数据
const option = ref({
    textStyle: {
        color: "#fff",
        // fontSize:20
    },

    title: {
        text: '柱状图实例',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {},
    legend: {
        data: ['销量'],
        textStyle: {
            color: "#fff",
            fontSize: 16
        }
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子","裤子",],
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: 14
            }
        },
    },
    yAxis: {
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: 14
            }
        },
        splitLine: {
            lineStyle: {
                // 使用深浅的间隔色
                color: ['#fff'],
                width: 2
            }
        }
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        color: {
          type: 'linear',
          x: 0,  //右
          y: 0,  //下
          x2: 0,  //左
          y2: 1,  //上
          colorStops: [
            {
              offset: 0,
              color: 'pink' // 0% 处的颜色
            },
            {
              offset: 0.7,
              color: '#2378f7' // 70% 处的颜色
            },
            {
              offset: 1,
              color: '#83bff6' // 100% 处的颜色
            }
          ]
        }

    },
    ]
})

</script>

<style lang="scss" scoped>
.page-content {
    height: 100%;
    padding: 10px;
    width: 100%;
    display: flex;

    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .page-left {
        width: 500px;
        display: flex;
        flex-direction: column;

        .left-top {
            width: 500px;
            height: 400px;
        }

        .left-bottom {
            flex: 1;
            text-align: center;
            font-size: 20px;
        }
    }

    .page-right {
        width: 500px;
        text-align: center;

        .top {
            height: 400px;

            span {
                margin-top: 10px;
            }
        }

        .bottom {
            height: calc(100% - 400px);
        }

    }

    .page-center {
        flex: 1;

        .box13-content {
            height: 100%;
            text-align: center;
        }
    }

    .chart-title {
        display: inline-block;
        font-size: 20px;
    }
}
</style>